<template>
  <div class="notice-container">
    <el-card class="notice-card">
      <div class="notice-header">
        <i class="el-icon-megaphone header-icon"></i>
        <span>系统公告</span>
      </div>
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item 
          v-for="(item, index) in notices" 
          :key="item.id" 
          :name="index + ''"
          class="custom-collapse"
        >
          <template slot="title">
            <div class="notice-title-wrapper">
              <i class="el-icon-news title-icon"></i>
              <h4 class="notice-title">{{ item.title }}</h4>
              <el-tag v-if="index === 0" type="danger" size="mini" effect="dark">最新</el-tag>
              <div class="flex-grow"></div>
              <p class="notice-date">{{ formatDate(item.time) }}</p>
            </div>
          </template>
          <div class="notice-content">
            <div class="content-inner">
              <i class="el-icon-chat-dot-square content-icon"></i>
              <div class="content-text">{{ item.content }}</div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <div class="decor-line"></div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
        notices: [],
        activeName: '0'
      }
    },
    created() {
      this.loadNotice()
    },
    methods: {
      loadNotice() {
        this.$request.get('/notice/selectData').then(res => {
          this.notices = res.data.map(item => ({
          ...item,
            time: this.formatDate(item.time)
          }));
        })
      },
      formatDate(time) {
        const date = new Date(time);
        const formattedDate = `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`;
        return formattedDate;
      },
      padZero(num) {
        return num < 10? '0' + num : num;
      }
    }
  }
  </script>

<style scoped>
.notice-container {
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 40px 20px;
  background: linear-gradient(135deg, #cbdcf4 0%, #608ee9 100%);
  backdrop-filter: blur(10px);
}

.notice-card {
  width: 90%;
  max-width: 700px;
  height: 100%;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: visible;
}

.notice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.notice-header {
  padding: 24px 0;
  text-align: center;
  position: relative;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.header-icon {
  font-size: 32px;
  color: #6366f1;
}

.custom-collapse {
  margin: 0 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.custom-collapse:not(:last-child) {
  margin-bottom: 16px;
}

.notice-title-wrapper {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  width: 100%;
  gap: 12px;
}

.title-icon {
  font-size: 20px;
  color: #6366f1;
}

.notice-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  transition: color 0.3s ease;
}

.flex-grow {
  flex-grow: 1;
}

.notice-date {
  font-size: 14px;
  color: #718096;
  margin: 0;
  font-weight: 500;
}

.notice-content {
  padding: 20px;
  background: rgba(99, 102, 241, 0.05);
  border-radius: 0 0 12px 12px;
  border-left: 4px solid #6366f1;
  margin: -1px;
}

.content-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.content-icon {
  font-size: 20px;
  color: #6366f1;
  margin-top: 4px;
}

.content-text {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  flex-grow: 1;
}

.decor-line {
  position: absolute;
  bottom: -10px;
  left: 5%;
  width: 90%;
  height: 10px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 0 0 16px 16px;
  z-index: -1;
}

/* 交互优化 */
.el-collapse-item__header {
  transition: background 0.3s ease;
}

.el-collapse-item__header:hover {
  background: rgba(99, 102, 241, 0.05);
}

.el-collapse-item__wrap {
  border: none;
  background: transparent;
}

/* 展开状态样式 */
.custom-collapse.is-active .notice-title {
  color: #6366f1;
}

.custom-collapse.is-active .title-icon {
  color: #4f46e5;
}
</style>